import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

/* Lists & Keys */
/* 列表 & Key */

/* Key */

// key帮助React识别哪些元素改变了, 比如添加或删除, 相当于每个元素的一个标识
// key是独一无二的(在兄弟节点中, 而不是在全局中, 生成两个不同的数组可以用相同key值)
// 通常使用数据的id作为元素的key
// 没有确定的id时会使用索引, 列表项目的顺序会变化, 索引也会变, 这样会导致性能变差, 引发组件状态问题
// key应该在数组的上下文被指定, 如上面的例子, 而不是返回的li中
// key传递信息给React但不传给组件, 组件需要key属性的值需要其他属性名显式传递

const nums = [1, 2, 3, 4, 5];
// 在JS中对数组的各个元素进行操作
const doubled = nums.map(num => num * 2);
// React中把数组转换成元素列表, 渲染多个组件
const listItems = nums.map(num => <li>{num}</li>);

// 把上面例子重构为组件
class NumberList extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        const nums = this.props.nums;
        // 单独声明变量
        const listItems = nums.map(num =>
            // 没有key属性会报警告
            <li key={num.toString()}>{num}</li>
        );
        return (
            // <ul>{listItems}</ul>

            // JSX中嵌入map()
            <ul>
                {nums.map(num =>
                    <li key={num.toString()}>{num}</li>
                )}
            </ul>
        );
    }

}

ReactDOM.render(
    <NumberList nums={nums} />,
    document.getElementById('root')
);